<template>
<div>
    <!-- Form -->
    <el-button type="edit" @click="dialogFormVisible = true">编辑</el-button>
    <el-dialog title="编辑字典项" :visible.sync="dialogFormVisible" width="530px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--父类字典有类型时插入-->
            <div v-if="Fatherobj.pTypeCode.length>0">
                <div class="create-1">
                    <span class="span-1">父级类型编码</span>
                    <span class="span-2">{{Fatherobj.typeCode}}</span>
                </div>
                <!--下拉框-->
                <div class="father-box">
                    <span class="father-title"> 父级字典项值：</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.pTypeCode" :label="item.pTypeCode" :value="item.pTypeCode"></el-option>
                    </el-select>
                </div>
            </div>
            <!--父类字典有类型时插入-->
            <div class="create-1">
                <span class="span-1">所属类型编码</span>
                <span class="span-2">{{ruleForm.pTypeCode}}</span>
            </div>
            <!--输入框-->
            <el-form-item label=" 字典项编码：" prop="itemName">
                <el-input v-model="ruleForm.itemName" placeholder="请输入字典项编码"></el-input>
            </el-form-item>

            <!--输入框-->
            <el-form-item label="  字典项值：" prop="itemValue">
                <el-input v-model="ruleForm.itemValue" placeholder="请输入字典项值"></el-input>
            </el-form-item>
            <!--输入框-->
            <el-form-item label="  排序：" prop="itemSort">
                <el-input v-model="ruleForm.itemSort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <!--下拉框-->
            <el-form-item label=" 状态：" prop="itemStatus">
                <el-select v-model="ruleForm.itemStatus" placeholder="停用">
                    <el-option label="停用" value="2"></el-option>
                    <el-option label="启用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <!--文本框-->
            <div class="text-box">
                <h1 class="text-title">字典项描述：</h1>
                <el-input type="textarea" placeholder="请输入描述信息" v-model="textarea200" maxlength="200" show-word-limit></el-input>
            </div>
        </el-form>

        <!--结束-->
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="getDictionariesBianJIrIGHT">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            value: this.pItemValue,
            //文本框
            textarea200: "",
            dialogFormVisible: false,
            ruleForm: {
                pItemValue: "",
                pTypeCode: "",
                itemName: "",
                itemValue: "",
                itemSort: "",
                itemStatus: "",
            },
            options: [{
                    pTypeCode: 1,
                },
                {
                    pTypeCode: 2,
                },
                {
                    pTypeCode: 3,
                },
                {
                    pTypeCode: 4,
                },
            ],
            rules: {
                name: [{
                        required: true,
                        message: "请输入图片名称",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    },
                ],
                region: [{
                    required: true,
                    message: "请选择活动区域",
                    trigger: "change"
                }, ],
                date1: [{
                    type: "date",
                    required: true,
                    message: "请选择日期",
                    trigger: "change",
                }, ],
                date2: [{
                    type: "date",
                    required: true,
                    message: "请选择时间",
                    trigger: "change",
                }, ],
                type: [{
                    type: "array",
                    required: true,
                    message: "请至少选择一个活动性质",
                    trigger: "change",
                }, ],
            },
        };
    },
    props: ["id", "RightList", "pItemValue"],
    created() {
        this.get();
    },
    computed: {
        Fatherobj() {
            return this.$store.state.SystemSettings.Fatherobj;
        },
    },
    methods: {
        get() {
            this.Api.getDictionariesEach({
                id: this.id
            }).then((res) => {
                console.log(res, 1111);
                this.ruleForm = {};
                this.ruleForm = {
                    pItemValue: res.data.pItemValue,
                    pTypeCode: res.data.pTypeCode,
                    itemName: res.data.itemName,
                    itemValue: res.data.itemValue,
                    itemSort: res.data.itemSort,
                    itemStatus: res.data.itemStatus,
                };
            });
        },
        getDictionariesBianJIrIGHT() {
            this.Api.getDictionariesBianJIrIGHT({
                id: this.id,
                pItemValue: this.ruleForm.pItemValue,
                itemName: this.ruleForm.itemName,
                itemValue: this.ruleForm.itemValue,
                itemSort: this.ruleForm.itemSort,
                itemStatus: this.ruleForm.itemStatus,
            }).then((res) => {
                // console.log(res,111111)
                this.dialogFormVisible = false;
                this.RightList();
            });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-button--edit {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    padding: 0;
    color: #ffffff;
}

/deep/.el-dialog__wrapper {
    z-index: 2091 !important;

    .el-dialog {
        .el-dialog__header {
            background: rgba(230, 233, 237, 1);
            border-radius: 8px 8px 0px 0px;
            border: 1px solid rgba(230, 233, 237, 1);
            padding: 11px 20px 11px 24px;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                line-height: 24px;
            }

            .el-dialog__headerbtn {
                top: 15px;
            }
        }

        .el-dialog__body {
            padding: 30px 29px 0 42px;

            .el-form {
                .el-form-item {
                    margin: 0 0 16px 0;

                    .el-form-item__label {
                        width: 113px !important;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        padding: 0;
                    }

                    .el-form-item__content {
                        margin-left: 113px !important;

                        .el-input__inner {
                            width: 260px;
                            height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            border: 1px solid rgba(221, 221, 221, 1);
                            padding-left: 12px;
                        }
                    }
                }

                .pic-box {
                    display: flex;
                    padding-bottom: 10px;

                    .h1-1 {
                        width: 85px;
                        height: 22px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-align: right;
                    }

                    .h1-1::before {
                        content: "* ";
                        color: #ff0000;
                    }
                }

                .flex-box {
                    display: flex;
                    justify-content: flex-end;

                    .pic-Tips {
                        width: 360px;
                        padding-top: 6px;
                        padding-bottom: 15px;
                        border-top: 1px solid #dddddd;

                        h1 {
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                            line-height: 22px;
                        }
                    }
                }
            }
        }

        .el-dialog__footer {
            padding: 30px 30px 26px;

            .dialog-footer {
                .el-button--default {
                    width: 70px;
                    height: 36px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 3px;
                    border: 1px solid rgba(215, 219, 224, 1);
                    padding: 0;
                    color: rgba(51, 51, 51, 1);
                }

                .el-button--primary {
                    width: 70px;
                    height: 36px;
                    background: rgba(61, 127, 255, 1);
                    border-radius: 3px;
                    padding: 0;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}

//新建字典的改动
/deep/.el-form {
    .create-1 {
        padding-bottom: 15px;

        .span-1 {
            display: inline-block;
            width: 100px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 22px;
            text-align: right;
            margin-right: 14px;
        }

        .span-2 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }
    }
}

//文本框样式
/deep/.text-box {
    display: flex;

    .text-title {
        width: 144px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }

    .el-textarea__inner {
        min-height: 100px !important;
        padding-left: 10px;
        width: 345px;
    }
}

.father-box {
    padding: 0 0 0 15px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 20px;
}

/deep/.el-input {
    width: 131%;
}
</style>
